<!doctype html>
<html lang="zh-CN">
  <head>
    <title>动态码率视频播放前端m3u8格式视频</title>

    <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet" />
    <script src="https://vjs.zencdn.net/7.4.1/video.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>

    <meta charset="UTF-8" />
    <style>
      .quality-selector {
        margin: 10px 0;
        padding: 8px;
      }
    </style>
  </head>

  <body>
    <h1>动态码率视频播放器</h1>
    <div>
      <label>选择码率：</label>
      <select class="quality-selector" id="qualitySelect">
        <option value="auto">自动切换（默认）</option>
        <option value="360p">360p（流畅）</option>
        <option value="720p">720p（高清）</option>
        <option value="1080p">1080p（超清）</option>
        <option value="2160p">2160p（4K）</option>
      </select>
    </div>
    <video
      id="videoPlayer"
      class="video-js vjs-default-skin vjs-big-play-centered"
      controls
      preload="auto"
      width="640"
      height="268"
      data-setup="{}"
      width="1280"
      controls
      autoplay
    >
      <source src="/stream/test/master.m3u8" type="application/x-mpegURL" />
      你的浏览器不支持HLS流媒体
    </video>

    <script>
      const select = document.getElementById("qualitySelect");
      const video = document.getElementById("videoPlayer");
      const baseUrl = "/stream/test/";

      select.addEventListener("change", () => {
        const quality = select.value;
        let src;
        if (quality === "auto") {
          src = baseUrl + "master.m3u8";
        } else {
          src = baseUrl + quality + "/stream.m3u8";
        }
        const myVideo = videojs("videoPlayer", {
          bigPlayButton: true,
          textTrackDisplay: false,
          posterImage: false,
          errorDisplay: false,
        });

        myVideo.src({ src });
        myVideo.load();
        myVideo.play();
      });
    </script>
  </body>
</html>
